<template>
  <div class="docIndex">
    <div class="docIndex_head">
      <!-- 头部 -->
      <el-form :model="queryForm" label-width="100px" style="display: flex; flex: 1; justify-content: space-between;">
        <div style="display: flex; flex: 1;">
          <el-form-item label="资料标题:">
            <el-input placeholder="请输入资料标题" v-model="queryForm.textTitle" size="small" maxlength="50" />
          </el-form-item>
          <el-form-item label="资料标签:">
            <el-select v-model="queryForm.textLabel" placeholder="请选择" multiple clearable size="small">
              <el-option v-for="item in textLabelList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label-width="20px" style="margin-left: 0; margin-right: 0;">
            <el-button size="small" @click="reset">
              重 置
            </el-button>
            <el-button type="primary" size="small" @click="getTextList">
              查 询
            </el-button>
          </el-form-item>
        </div>
        <el-form-item style="margin-left: 0; margin-right: 0;">
          <el-button @click="refresh">
            刷新
          </el-button>
          <el-button type="primary" size="small" plain @click="handleHelpAdd">
            新增
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="docIndex_table">
      <div class="docIndex_table_top" />
      <el-main class="main_table" ref="container">
        <!-- 表格 -->
        <vxe-table :data="tableData" border style="width: 100%; margin-bottom: 20px" highlight-current-row>
          <vxe-column field="textTitle" title="资料标题" width="250" align="center" />
          <vxe-column field="textType" title="资料类别" width="120" align="center">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.textType == 0">
                帮助文档
              </el-tag>
              <el-tag type="success" v-if="scope.row.textType == 1">
                常见问题
              </el-tag>
              <el-tag type="warning" v-if="scope.row.textType == 2">
                视频video
              </el-tag>
            </template>
          </vxe-column>
          <vxe-column field="textLabel" title="资料标签" width="250" align="center" />
          <vxe-column field="textOrder" title="资料排序" width="130" align="center" sortable />
          <vxe-column field="description" title="备注" show-overflow="tooltip" align="center" />
          <vxe-column title="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button type="primary" size="small" plain @click="handleEdit(scope.row, 'edit')">
                编辑
              </el-button>
              <el-button size="small" plain type="danger" @click="handleDelete(scope.row.textId)">
                删除
              </el-button>
              <!-- <el-button size="small" plain type="primary" @click="handleLook(scope.row)">
                查看
              </el-button> -->
            </template>
          </vxe-column>
        </vxe-table>
      </el-main>
      <!-- 分页 -->
      <div class="bot_pagination">
        <vxe-pager background @page-change="handleCurrentChange" :current-page.sync="page.currentPage"
          :page-size.sync="page.pageSize" :layouts="[
            'PrevJump',
            'PrevPage',
            'JumpNumber',
            'NextPage',
            'NextJump',
            'Sizes',
            'FullJump',
            'Total',
          ]" :total="page.totalPage" />
      </div>
    </div>
    <!-- 富文本编辑器 -->
    <addEditor ref="helpTextRef" v-if="showAddorEdit" @refresh="getTextList" />

    <!-- 查看 -->
    <lookEditorText ref="lookEditorText" />
  </div>
</template>
<script>
import { helpTextList, helpTextDelete } from "@/api/knowledge/helpText";
import { getList } from "@/api/knowledge/label";
import lookEditorText from "./lookEditorText"
import addEditor from "./addEditor";
import store from "@/store";
export default ({
  name: `helpText`,
  components: { addEditor, lookEditorText },
  data() {
    return {
      tableData: [],
      page: {
        currentPage: 1,
        pageSize: 20,
        totalPage: 0,
      },
      showAddorEdit: false,
      queryForm: {
        textTitle: ``,
        textLabel: [],
      },
      textLabelList: [],
      textBussinessTypeCode: "111",
      fileBusinessTypeId: "111"
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.showAddorEdit = true;
      this.getTextList();
      this.getTagDataList();
    },
    getTextList() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        userName: store.getters.userName.toString(),
        data: {
          textBussinessTypeCode: this.textBussinessTypeCode,
          pageSize: this.page.pageSize,
          currentPage: this.page.currentPage,
          textTitle: this.queryForm.textTitle,
        },
      };
      if (this.queryForm.textLabel.length) {
        params.data.textLabel = this.queryForm.textLabel.join(`,`);
      }
      helpTextList(params).then((data) => {
        if (data.result) {
          this.tableData = data.resultdata.data;
          this.page.totalPage = data.resultdata.count;
        }
      });
    },
    // 获取标签
    getTagDataList() {
      const params = {
        data: { fileBusinessTypeId: this.fileBusinessTypeId },
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        userName: store.getters.userName.toString(),
      };
      getList(params).then((data) => {
        if (data.result) {
          const items = [];
          data.resultdata.data.forEach(function (obj, index) {
            items.push({
              label: obj.labelName,
              index: index,
              value: obj.labelName,
            });
          });

          this.textLabelList = items;
        }
      });
    },

    // 查看效果
    handleLook(row) {
      this.$refs.lookEditorText.init(row);
    },

    //新增
    handleHelpAdd() {
      this.showAddorEdit = true;
      this.$nextTick(() => {
        this.$refs.helpTextRef.init();
      });
    },
    //编辑
    handleEdit(row, flag) {
      this.showAddorEdit = true;
      this.$nextTick(() => {
        this.$refs.helpTextRef.init(row.textId, flag);
      });
    },
    //删除
    handleDelete(id) {
      this.$confirm(`是否删除此条记录?`, `提示`, {
        confirmButtonText: `确定`,
        cancelButtonText: `取消`,
        type: `warning`,
      }).then(() => {
        const params = {
          data: { textId: id },
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          userName: store.getters.userName.toString(),
        };
        helpTextDelete(params).then((data) => {
          if (data.result) {
            this.$message({
              type: `success`,
              message: `删除成功`,
            });
            this.getTextList();
            //为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
            const total = Math.ceil((this.page.totalPage - 1) / this.page.pageSize); // 总页数
            this.page.currentPage =
              this.page.currentPage > total ? total : this.page.currentPage;

            this.page.currentPage =
              this.page.currentPage < 1 ? 1 : this.page.currentPage;
          }
        });
      });
    },
    refresh() {
      this.$nextTick(() => {
        this.tableData = [];
      })
      this.getTextList();
    },
    reset() {
      this.queryForm.textTitle = null;
      this.queryForm.textLabel = [];
    },
    handleCurrentChange({ currentPage, pageSize }) {
      //选择跳转多少页
      this.page.currentPage = currentPage;
      this.page.pageSize = pageSize;
      this.getTextList();
    },
  },
})
</script>

<style scoped lang="scss">
* {
  scrollbar-width: thin;
  scrollbar-color: #333 transparentize;
}

.external-frame .external-frame-content .router-view {
  padding: 10px !important;
  background: #eee !important;
}

.docIndex {
  height: calc(100% - 125px);
  background: #eee;

  &_head {
    height: 60px;
    background: #ffffff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-sizing: border-box !important;

    .form_item {
      flex: 1;
      margin-right: 10px;

      &_title {
        font-size: 14px;
        color: #000000;
        line-height: 24px;
        margin-bottom: 8px;
      }

      &_number {
        display: flex;
        width: 220px;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #000000;
        line-height: 22px;

        >.el-input-number {
          width: 100px;

          .el-input--small {
            .el-input__inner {
              padding: unset;
              padding-left: 10px;
            }
          }
        }
      }

      .el-date-editor {
        width: 260px;
      }
    }

    .form_button {
      margin-right: 8px;

      &_title {
        height: 24px;
        margin-bottom: 8px;
      }
    }
  }

  &_table {
    width: 100%;
    background: #ffffff;
    border-radius: 4px;
    height: auto;
    margin-top: 10px;
    box-sizing: border-box;
    padding: 0 24px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 24px;

    &_top {
      height: 34px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .table_operate {
      display: flex;
      justify-content: space-around;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #579ef8;
      line-height: 22px;
      //width: 125px;

      .edit {
        cursor: pointer;
      }

      .del {
        color: #f85757;
        cursor: pointer;
      }
    }

    .bot_pagination {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 60px;
    }
  }
}

.main_table {
  height: calc(100vh - 124px - 112px - 24px - 35px);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #333 transparentize;

  .vxe {
    >.vxe__body-wrapper {
      scrollbar-width: thin;
      scrollbar-color: #333 transparentize;
    }

    .docIcon {
      vertical-align: middle;
      width: 48px;
      height: 48px;
    }
  }
}

.el-form {
  display: flex !important;
  margin-top: 20px;
}

.docIndex_head {
  height: 60px;
}
</style>
<style lang="scss">
.search_cascader .el-checkbox__inner {
  border: 2px solid #999 !important;
}
</style>
<style scoped>
>>>.vxe-table--header-wrapper {
  background: linear-gradient(180deg, #fff, #ededed) !important;
}
</style>
